<template>
	<view>
		<view class="kong">
			
		</view>
	    <view class="setup">
	    	<view class="shezhi">
	    		<image src="../../../static/teacherimg/setup.png" mode="" class="img"></image>
	    		<text>设置</text>
	    	</view>
	    </view>
	
	    <view class="touxiang">
			<image src="../../../static/teacherimg/headimg.png" mode="" class="headimg"></image>
			<view class="name">
				<text class="ming">李黎栗丽</text>
				<text class="teacher">舜泽老师</text>
			</view>
			
			<view class="qiehuan">
				<image src="../../../static/teacherimg/huan.png" mode="" class="huan"></image>
				<text class="qiehuanzi">切换身份</text>
			</view>
	    </view>
		
		<view class="huodong">
			<image src="../../../static/teacherimg/huodong.png" mode="" class="tishi"></image>
		</view>
		
		<view class="gongneng">
			<text class="tiao"></text>
			<view class="myfunction">
				我的功能
			</view>
		</view>
		
		<view class="gongnengcontent">
			<view v-for="(item,index) in dataList" :key="index" class="keshi">
				<image :src="item.img" mode="" class="tupian"></image>
				<text class="functionname">{{item.name}}</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{
						img:'../../../static/teacherimg/keshi.png',
						name:'我的课时'
					},
					{
						img:'../../../static/teacherimg/daka.png',
						name:'打卡'
					},
					{
						img:'../../../static/teacherimg/zuoye.png',
						name:'布置作业'
					},
					{
						img:'../../../static/teacherimg/dingdan.png',
						name:'我的订单'
					},
					{
						img:'../../../static/teacherimg/xueyuan.png',
						name:'我的学员'
					},
					{
						img:'../../../static/teacherimg/fankui.png',
						name:'建议反馈'
					},
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.kong{
		width: 100%;
		height: 50rpx;
	}
	.setup{
		width: 690rpx;
		height: 40rpx;
		margin:auto;
		margin-top:0rpx;
	}
	
	.img{
		width:42rpx;
		height:40rpx;
		margin-right: 11rpx;
	}
	.shezhi{
		width: auto;
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		color: #333333;
		font-size:32rpx;
		float: right;
		font-weight:600;
	}
	.touxiang{
		width: 690rpx;
		height: 120rpx;
		margin: auto;
		margin-top: 52rpx;
	}
	.headimg{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		float: left;
	}
	.name{
		width: 150rpx;
		height: 100%;
		float: left;
		margin-left:34rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.ming,.teacher{
		width: 100%;
		height: auto;
		float: left;
	}
	.ming{
		font-size: 36rpx;
		color: #333333;
		margin-top: 10rpx;
	}
	.teacher{
		color: #AAAAAA;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
	.qiehuan{
		width: auto;
		height:30rpx;
		margin-top: 45rpx;
		float: right;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.huan{
		width:29rpx;
		height: 26rpx;
		margin-right: 7rpx;
	}
	.qiehuanzi{
		color: #333333;
		font-size: 28rpx;
	}
	.huodong{
		width: 690rpx;
		height: 230rpx;
		position: relative;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 75rpx;
		background: url(../../../static/teacherimg/huodong_bg.png) no-repeat;
		background-size: cover;
	}
	.tishi{
		width: 140rpx;
		height: 45rpx;
		position: absolute;
		top: 0;
		left: 15rpx;
	}
	
	.gongneng{
		width: 690rpx;
		height: 32rpx;
		margin: auto;
		margin-top:60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tiao{
		width: 5rpx;
		height: 19rpx;
		background: #8DCE2A;
		border-radius: 2.5rpx;
		float: left;
	}
	.myfunction{
		width: auto;
		height: 100%;
		float: left;
		margin-left: 16rpx;
		font-size: 32rpx;
		line-height: 32rpx;
		color: #333333;
	}
	
	.gongnengcontent{
		width: 690rpx;
		height: auto;
		margin: auto;
		margin-top:0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items:stretch;
	}
	.keshi{
		width:112rpx;
		height:105rpx;
		margin-left: 34rpx;
		margin-right: 34rpx;
		margin-top: 60rpx;
		display: flex;
		flex-direction:column;
		justify-content: space-between;
		align-items: center;
	}
	.tupian{
		width: 63rpx;
		height: 56rpx;
	}
	.functionname{
		width: 100%;
		text-align: center;
		height:28rpx;
		color: #333333;
		font-size: 28rpx;
	}
</style>
